<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
<head>
	<title>Peak a Personal Portfolio Flat Bootstrap Responsive Website Template | Home :: w3layouts</title>
	<!--fonts-->
		<link href='http://fonts.googleapis.com/css?family=Jockey+One' rel='stylesheet' type='text/css'>
		<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
	<!--//fonts-->
			<link href="css/bootstrap.css" rel="stylesheet">
			<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
	<!-- for-mobile-apps -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="Peak Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
		Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
		<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
	<!-- //for-mobile-apps -->	
	<!-- js -->
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script src="js/modernizr.custom.97074.js"></script>
	<!-- js -->
	<!-- start-smoth-scrolling -->
		<script type="text/javascript" src="js/move-top.js"></script>
		<script type="text/javascript" src="js/easing.js"></script>
		<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
				});
			});
		</script>
	<!-- start-smoth-scrolling -->
</head>
<body>
<!-- banner -->
<div id="home" class="banner">
	<div class="container">
		<div class="banner-grids">
			<div class="col-md-4 navigation">
				<div class="nav-left">
					<div class="grid__item color-4">
						<a class="link link--kumya" href="#home">主页</a>
					</div>
				</div>
				<div class="nav-right">
						<span class="menu"><img src="images/menu.png" alt="" /></span>
							<nav class="cl-effect-1">
								<ul class="nav1">
									<li><a class="scroll" href="#home">我</a></li>
									<li><a class="scroll" href="#about">对科目的掌握</a></li>
									<li><a class="scroll" href="#portfolio">图片</a></li>
									<li><a class="scroll" href="#contact">个人爱好及兴趣</a></li>
								</ul>
							</nav>
							<!-- script for menu -->
							<script> 
								$( "span.menu" ).click(function() {
								$( "ul.nav1" ).slideToggle( 300, function() {
								 // Animation complete.
								});
								});
							</script>
							<!-- //script for menu -->

				</div>
				<div class="clearfix"></div>
			</div>
			<div class="col-md-8 banner-image text-center">
				<img src="images/banner.jpg" alt=""/>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
</div>
<!-- //banner -->
<!-- about -->
<div id="about" class="about">
	<div class="container">
		<div class="about-info">
				<h3>姓名：李俊波</h3>
				<h4>年龄：20</h4>
				<p>现在成都市龙泉驿区西河镇华新现代学院就读</p>
		</div>
		<div class="about-grids">
		   	<div class="col-md-6 about-grid">
		   		<h4>联系方式</h4>
		   		<p>电话：13880456136
		   		QQ：434347275</p>
		   	</div>
		   	<div class="col-md-6 about-grid">
		   		<h4>座右铭</h4>
		   		<p>抱最大的希望,为最大的努力,做最坏的打算</p>
		   		<p>乘风破浪会有时，直挂云帆济沧海</p>
		   	</div>
		   	<div class="clearfix"> </div>
		</div>   
	</div>
</div>
<!-- //about -->
<!-- my skills -->
	<div class="our-skills">
		<div class="container">
			<div class="skill-info">
				<h2>科目</h2>
			</div>
			<div class="skill-grids">
					<div class="col-md-3 skills-grid text-center">
						<div class="circle" id="circles-1"></div>
						<p>数据库</p>
					</div>
					<div class="col-md-3 skills-grid text-center">
						<div class="circle" id="circles-2"></div>
						<p>PS图形图像设计</p>
					</div>
					<div class="col-md-3 skills-grid text-center">
						<div class="circle" id="circles-3"></div>
						<p>Flash动画设计</p>
					</div>
					<div class="col-md-3 skills-grid text-center">
						<div class="circle" id="circles-4"></div>
						<p>C语言</p>
					</div>
					<div class="clearfix"> </div>
				 <script type="text/javascript" src="js/circles.js"></script>
					         <script>
								var colors = [
										['#ced7df', '#76b852'], ['#ced7df', '#76b852'], ['#ced7df', '#76b852'], ['#ced7df', '#76b852']
									];
								for (var i = 1; i <= 5; i++) {
									var child = document.getElementById('circles-' + i),
										percentage = 40 + (i * 10);
										
									Circles.create({
										id:         child.id,
										percentage: percentage,
										radius:     80,
										width:      10,
										number:   	percentage / 10,
										text:       '%',
										colors:     colors[i - 1]
									});
								}
						
				</script>
			</div>
		</div>	
	</div>
<!-- //my skills -->
<div id="portfolio" class="gallery">
		<div class="container">
				<script src="js/jquery.chocolat.js"></script>
			<link rel="stylesheet" href="css/chocolat.css" type="text/css" media="screen" charset="utf-8">
			<!--light-box-files -->
			<script type="text/javascript" charset="utf-8">
			$(function() {
				$('.gallery a').Chocolat();
			});
			</script>
			<h3>喜欢的图片</h3>
			<section>
				<ul id="da-thumbs" class="da-thumbs">
					<li>
						<a href="images/a1.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
							<img src="images/a1.jpg" alt="" />
							<div>
							</div>
						</a>
					</li>
					<li>
						<a href="images/a2.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
							<img src="images/a2.jpg" alt="" />
							<div>
							
							</div>
						</a>
					</li>
					<li>
						<a href="images/a3.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
							<img src="images/a3.jpg" alt="" />
							<div>
					
								
							</div>
						</a>
					</li>
					<li>
						<a href="images/a4.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
							<img src="images/a4.jpg" alt="" />
							<div>
								
								
							</div>
						</a>
					</li>
					<li>	
						<a href="images/a5.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
							<img src="images/a5.jpg" alt="" />
							<div>
							
								
							</div>
						</a>
					</li>
					<li>
						<a href="images/a6.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
							<img src="images/a6.jpg" alt="" />
							<div>
					
								
							</div>
						</a>
					</li>
					<li>
						<a href="images/a7.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
							<img src="images/a7.jpg" alt="" />
							<div>
							
							
							</div>
						</a>
					</li>
					<li>
						<a href="images/a1.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
							<img src="images/a1.jpg" alt="" />
							<div>
						
								
							</div>
						</a>
					</li>
					<li>
						<a href="images/a2.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
							<img src="images/a2.jpg" alt="" />
							<div>
				
								
							</div>
						</a>
					</li>
					<div class="clearfix"> </div>
				</ul>
			</section>
				<script type="text/javascript" src="js/jquery.hoverdir.js"></script>	
				<script type="text/javascript">
					$(function() {
						$(' #da-thumbs > li ').each( function() { $(this).hoverdir(); } );
					});
				</script>
        </div>	
</div>
<!--//news-->
<!-- get-in -->
<div id="contact" class="get-in-touch">
	<div class="container">
		<div class="get-info text-center">
			<h3>个人兴趣，爱好</h3>
			<p>我喜欢听歌但并不喜欢唱歌因为自己唱歌难听</p>
			<p>平时我也喜欢戴上耳机在操场上听着歌跑步 因为我觉得这样很享受</p>
			<p>生活中我总会遇到自己所不喜欢的 但是没办法现实就是这样没办法违背</p>
			<p>所以只有好好的努力才能改变自己</p>
			<p>人生没有拼搏就没有成功</p>
			<p>加油吧！少年。相信自己！</p>
		</div>
	</div>
	<div class="map">
		<iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d2482.432383990807!2d0.028213999961443994!3d51.52362882484525!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sin!4v1423469959819" frameborder="0" style="border:0"></iframe>
	</div>
</div>	
<!-- footer -->
<!-- smooth scrolling -->
	<script type="text/javascript">
		$(document).ready(function() {
		/*
			var defaults = {
			containerID: 'toTop', // fading element id
			containerHoverID: 'toTopHover', // fading element hover id
			scrollSpeed: 1200,
			easingType: 'linear' 
			};
		*/								
		$().UItoTop({ easingType: 'easeOutQuart' });
		});
	</script>
	<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<!-- //smooth scrolling -->
</body>
</html>
